<!-- 会员积分明细 -->
<template>
  <div class="IntegralGain">
    <!-- 头部 -->
    <div class="ig_header">
      <div class="ig_header_top">
        <div class="ig_header_int2">
          <el-form-item label="会员名称">
            <el-input v-model="form.vipname" placeholder="会员名称" />
          </el-form-item>
        </div>
        <div class="ig_header_int1">
          <el-form-item label="兑换时间">
            <el-date-picker v-model="form.timer" type="daterange" range-separator="至" start-placeholder="请选择开始时间"
              end-placeholder="请选择结束时间" size="default" />
          </el-form-item>
        </div>
        <div class="ig_header_int3">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="chongzhi">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="ig_content">
      <h4>会员积分明细列表</h4>
      <div class="ig_content_tab">
        <!-- 表格头部 -->
        <div class="ig_content_tab_header">
          <ul>
            <li><input type="checkbox" v-model="checkIsAll" @click="checksAll" /></li>
            <li>会员ID</li>
            <li>会员名称</li>
            <li>账户积分余额</li>
            <li>使用积分累计</li>
            <li>失效积分累计</li>
            <li>最近积分消费日期</li>
            <li style="border-right: none;">操作</li>
          </ul>
        </div>
        <div class="ig_content_tab_content">
          <ul v-for="item in list" :key="item.id">
            <li><input type="checkbox" v-model="checkModel" :value="item.id" /></li>
            <li>{{ item.getID }}</li>
            <li>{{ item.vipname }}</li>
            <li>{{ item.getjf }}</li>
            <li>{{ item.syjf }}</li>
            <li>{{ item.sxjf }}</li>
            <li>{{ msToDate(item.timer).hasTime }}</li>
            <li style="color: #279efb;" @click="dialog(item)">变更明细</li>
          </ul>
        </div>
      </div>
      <div class="ig_content_tab_floor">
        <Pagination :currentPage="currentPage" :pageSize="pageSize" :total="total"
          @current-change="handlePaginationChange"></Pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="ig_dialog">
      <el-dialog v-model="dialogVisible" title="会员积分明细" width="30%" :before-close="handleClose">
        <ul class="dg_ul">
          <li>
            <p>会员ID：</p><span>{{ oneList.getID }}</span>
          </li>
          <li>
            <p>会员名称：</p><span>{{ oneList.vipname }}</span>
          </li>
          <li>
            <p>账户积分余额：</p><span>{{ oneList.getjf }}</span>
          </li>
          <li>
            <p>使用积分累计：</p><span>{{ oneList.syjf }}</span>
          </li>
          <li>
            <p>失效积分累计：</p><span>{{ oneList.sxjf }}</span>
          </li>
          <li>
            <p>最近积分消费日期：</p><span>{{ msToDate(oneList.timer).hasTime }}</span>
          </li>
        </ul>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">
              关闭
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getJfHuoqu } from '@/api/http';
import Pagination from '@/components/Pagination/Pagination.vue'
import { ref, watchEffect } from 'vue';
import msToDate from '@/utils/data';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus'

// 弹窗
const dialogVisible = ref(false)
const oneList = ref()
const dialog = (e: any) => {
  dialogVisible.value = true
  oneList.value = e
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const form = ref({
  // 日期选择
  timer: '',
  // 会员名称
  vipname: ''
})
// 获取数据
let dataList = ref([])
let list = ref([])
getJfHuoqu().then(res => {
  dataList.value = res.data
  fenye(dataList.value)
})
// 分页功能
const currentPage = ref(1);
const pageSize = ref(10);
let total = ref(0)
const handlePaginationChange = (currentPages: any) => {
  currentPage.value = currentPages
  fenye(dataList.value)
};
// 分页
const fenye = (e: any[]) => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  list.value = e.slice(start, end);
  total.value = e.length;
}
// 全选/反选
let checkIsAll = ref(false) //是否全选
let checkModel = ref([])
// 监听checkmodel数组的变化
watchEffect(() => {
  if (checkModel.value.length == dataList.value.length) {
    checkIsAll.value = true;
  } else {
    checkIsAll.value = false;
  }
});
// 全选反选
const checksAll = () => {
  if (checkIsAll.value) {
    checkModel.value = [];
  } else {
    //用foreach循环数组
    dataList.value.forEach((item: { name: any; id: any; }, index: any) => {
      //返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
      if (checkModel.value.indexOf(item.name) == -1) {
        //向数组checkModel末尾追加id或者name,id或name保持和input的value一致即可
        checkModel.value.push(item.id);
      }
    });
  }
}
// 模糊搜索
const filterOne = function (dataList: any[], value: any, type: string | any[]) {
  var s = dataList.filter((item) => {
    for (let j = 0; j < type.length; j++) {
      if (item[type[j]] !== undefined || item[type[j]] != null) {
        if (item[type[j]].indexOf(value) >= 0) {
          return item;
        }
      }
    }
  });
  return s;
}
// 重置按钮
const chongzhi = () => {
  form.value = {
    // 日期选择
    timer: '',
    // 会员名称
    vipname: ''
  }
  render(dataList.value)
}
// 查询按钮
// 封装提示信息
const elmsg = (list: any, msg: any, type: any) => {
  list.value = list
  fenye(list)
  ElMessage({
    message: msg,
    type: type,
  })
}
// 渲染页面
const render = (e: any) => {
  list.value = e
  fenye(e)
}
// 搜索数据form.value
const onSubmit = () => {
  const timer1 = new Date(form.value.timer[0]).getTime()
  const timer2 = new Date(form.value.timer[1]).getTime()
  if (form.value.vipname) {// 判断会员名称输入框中是否有内容
    // 有的话执行这里面的
    const type = ['vipname']
    const s = filterOne(dataList.value, form.value.vipname, type)
    if (s.length) {
      if (form.value.timer) {
        const isTimer = s.filter((item: { timer: number; }) => {
          return item.timer >= timer1 && item.timer <= timer2
        })
        if (isTimer.length) {
          render(isTimer)
        } else {
          elmsg(dataList.value, '检查时间段或会员名称是否正确或无当前信息！', 'error')
        }
      } else {
        render(s)
      }
    } else {
      elmsg(dataList.value, '检查时间段或会员名称是否正确或无当前信息！', 'error')
    }
  } else if (form.value.timer) {// 判断时间选择中是否有内容
    // 有的话执行这里面的
    const isTimer = dataList.value.filter((item: { timer: number; }) => {
      return item.timer >= timer1 && item.timer <= timer2
    })
    if (isTimer.length) {
      render(isTimer)
    } else {
      elmsg(dataList.value, '检查时间段是否正确或无数据！', 'error')
    }
  } else {// 如果两个都没有的话
    elmsg(dataList.value, '请输入要查询的时间段或会员名称！', 'warning')
  }
}

</script>

<style scoped lang="scss">
.dg_ul {
  list-style: none;
  line-height: 40px;

  li {
    display: flex;
    align-items: center;

    p {
      font-weight: 600;
      font-size: 16px;
      line-height: 40px;
      color: black;
    }

    span {
      font-size: 16px;
    }
  }
}

.IntegralGain {
  background: #b4b4b4 !important;

  .ig_header {
    padding: 10px;
    background: #ffffff;
  }

  .ig_content {
    padding: 20px;
    background: #ffffff;
    margin-top: 30px;

    .ig_content_tab {
      margin-top: 20px;
      border: #b4b4b4 1px solid;

      .ig_content_tab_content {

        ul {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          height: 45px;

          li {
            width: 30%;
            line-height: 45px;
          }
        }
      }

      .ig_content_tab_header {

        ul {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          text-align: center;
          height: 60px;

          li {
            width: 30%;
            border-bottom: #b4b4b4 1px solid;
            border-right: #b4b4b4 1px solid;
            line-height: 59px;
            background: #f5f9fa;
          }
        }
      }
    }
  }

  .ig_content_tab_floor {
    margin-top: 10px;
  }
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.ig_header_top {
  display: flex;
  padding: 20px 30px 0;
  align-items: center;
  justify-content: space-around;
}
</style>